import React, { useState } from "react";
import {
  NavBar,
  Form,
  Input,
  Checkbox,
  Button,
  Toast,
  Modal,
} from "antd-mobile";
import { MoreOutline } from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";

function Index() {
  let [userInfo, setUserInfo] = useState(
    {
      name:'张三',
      phone: '13345678901',
      code: '1234',
      avator:'https://tse1-mm.cn.bing.net/th/id/OIP-C.StrDRqennoZNbzSPZapKZwAAAA?w=316&h=180&c=7&r=0&o=5&dpr=1.8&pid=1.7'
    },
  );
  const navigate=useNavigate()
 
  let [flag1,setFlag1]=useState(true)
  const onFinish = (values) => {

   
    console.log(values);
 const { phone } = values;
  console.log(phone)
     console.log(userInfo.phone);
    let flag = userInfo.phone===phone

    if (flag) {
     
     
      Toast.show({
        icon: "success",
        content: "手机号正确",
      });
      

      setTimeout(()=>{
         setFlag1(false)
      },2000)
       
    } else {
      Toast.show({
        icon: "fail",
        content: "手机号错误",
      });
    }
  //没有选择协议 会被阻止
    if (!values.state) {
      Toast.show({
        icon: "fail",
        content: "请同意协议",
      });
     
      return;
    }
  };

  
    
   

  
  //点击同意协议 弹出内容
  const check = () => {
    Modal.confirm({
      content: "这个是福海付哈开发商购物卡结算单防护网,请同意协议",
      onConfirm: () => {
        Toast.show({
          icon: "success",
          content: "同意",
          position: "bottom",
        });
      },
    });
  };
   
  const onFinish2=(values)=>{
    console.log(values)
    let {code}=values
    let flag2 = userInfo.code===code 
    let obj = userInfo.avator
     let obj2 = userInfo.name
    if(flag2)
    { 
    
     
      //存储token
       localStorage.setItem('token','21afsk94912')
       localStorage.setItem('avator',obj)
      localStorage.setItem('name',obj2)
        Toast.show({
          icon: "success",
          content: "登录成功",
          
        });
       //跳转到我的页面
       setTimeout(()=>{
        navigate('/my')
       },2000)
      
    }else{
       Toast.show({
          icon: "fail",
          content: "登录失败",
          
        });
    }
  }
  return (
    <div className="login_page">
      <NavBar right={<MoreOutline />}></NavBar>
      <div className="login_header">
        <h2>手机动态密码登录</h2>
        <p>
          <span style={{ color: "#cfcfcf", fontSize: "12px" }}>
            未注册手机验证后即可注册
          </span>
        </p>
      </div>

      <div className="login_form">
       {
         flag1 ?
           <Form
          onFinish={onFinish}
          layout="horizontal"
          footer={
            <Button block type="submit" color="primary" size="large" >
              获取验证码
            </Button>
          }
        >
          <Form.Item
            label="+86"
            name="phone"
            rules={[
              { required: true, message: "手机号不能为空" },
              { pattern: /^1[3-9]\d{9}$/, message: "手机号格式不正确" },
            ]}
          >
            <Input placeholder="请输入手机号" />
          </Form.Item>
          <Form.Item name="state">
            <Checkbox value="1" onClick={check}>
              <p className="text">
                阅读并同意阶乘的<span>《服务协议》</span>和
                <span>《个人信息保护指引》</span>
              </p>
            </Checkbox>
          </Form.Item>
        </Form>:
          <Form
          onFinish={onFinish2}
          layout="horizontal"
          footer={
            <Button block type="submit" color="primary" size="large" >
              登录
            </Button>
          }
        >
          <Form.Item
            label="验证码"
            name="code"
            rules={[
              { required: true, message: "验证码不能为空" },
             
            ]}
          >
            <Input placeholder="请输入验证码" />
          </Form.Item>
          
        </Form>
       }
      </div>
    </div>
  );
}

export default Index;
